<script setup lang="ts">
import VuePlayer from './VuePlayer.vue'
import { computed, ref } from 'vue'

const splitNum = ref(4)
const active = ref(1)
const recorder = ref()
const talkbackData = ref()
const dataList = ref([])
const videoRefs = ref<any[]>([])

const currPlayer = computed(() => {
  return videoRefs[active.value - 1]
})

function videoItemClick(n) {
  active.value = n
  console.log(n)
  talkbackData.value = currPlayer.value.data
}

function splitScreen(n) {
  console.log(n)
  splitNum.value = n
  active.value = 1
}
</script>

<template>
  <div class="sup-video-player">
    <div :class="['video-list', 'video-split-' + splitNum]">
      <div
        v-for="n in 9"
        :key="n"
        :class="['video-item', 'split-' + splitNum, 'video-item-' + n, { active: active == n }]"
        @click="videoItemClick(n)">
        <vue-player
          :id="'tc-player' + n"
          :ref="(el) => (videoRefs[n - 1] = el)"
          :keys="n"></vue-player>
      </div>
    </div>
    <div class="video-tools">
      <ul>
        <!--        <li>-->
        <!--          <el-tooltip placement="top">-->
        <!--            <div slot="content">保存视图</div>-->
        <!--            <svg-icon icon-class="vt_save_scene" @click="saveScene"/>-->
        <!--          </el-tooltip>-->
        <!--        </li>-->
        <!--        <li>-->
        <!--          <el-tooltip placement="top">-->
        <!--            <div slot="content">关闭所有</div>-->
        <!--            <svg-icon icon-class="vt_close_all" @click="closeAll"/>-->
        <!--          </el-tooltip>-->
        <!--        </li>-->
        <!--        <li>-->
        <!--          <el-tooltip placement="top">-->
        <!--            <div slot="content">关闭选中单元格</div>-->
        <!--            <svg-icon icon-class="vt_close" @click="closeCurCell"/>-->
        <!--          </el-tooltip>-->
        <!--        </li>-->
        <!--        <li v-if="false">-->
        <!--          <el-tooltip placement="top">-->
        <!--            <div slot="content">全屏</div>-->
        <!--            <svg-icon icon-class="vt_fullscreen" @click="fullscreen"/>-->
        <!--          </el-tooltip>-->
        <!--        </li>-->
        <!--        <li>-->
        <!--          <el-tooltip placement="top">-->
        <!--            <div slot="content">抓拍</div>-->
        <!--            <svg-icon icon-class="vt_screenshot" @click="capture"/>-->
        <!--          </el-tooltip>-->
        <!--        </li>-->
        <slot name="extend-tools"></slot>
        <li style="margin-left: auto">
          <el-tooltip placement="top">
            <div slot="content">9分屏</div>
            <svg-icon icon-class="vt_split_9" @click="splitScreen(9)" />
          </el-tooltip>
        </li>
        <li>
          <el-tooltip placement="top">
            <div slot="content">6分屏</div>
            <svg-icon icon-class="vt_split_6" @click="splitScreen(6)" />
          </el-tooltip>
        </li>
        <li>
          <el-tooltip placement="top">
            <div slot="content">4分屏</div>
            <svg-icon icon-class="vt_split_4" @click="splitScreen(4)" />
          </el-tooltip>
        </li>
        <li>
          <el-tooltip placement="top">
            <div slot="content">1分屏</div>
            <svg-icon icon-class="vt_split_1" @click="splitScreen(1)" />
          </el-tooltip>
        </li>
      </ul>
    </div>
  </div>
</template>

<style scoped lang="scss">
.sup-video-player {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: calc(100% - 48px) 48px;
  height: 100%;
  .video-list {
    flex: 1 1 auto;
    background: #98a5a5;
    display: grid;

    .video-item {
      background: black;
      border: 1px solid #052524;
      cursor: pointer;
      position: relative;
    }

    .video-item.active {
      border: 1px solid #009586;
      box-shadow: inset 0 0 2px 2px #ffba00;
    }

    &.video-split-6 {
      grid-template-columns: 33.33% 33.33% 33.33%;
      grid-template-rows: 33.33% 33.33% 33.33%;
    }

    .video-item.split-6.video-item-1 {
      grid-column-start: 1;
      grid-column-end: 3;
      grid-row-start: 1;
      grid-row-end: 3;
    }

    &.video-split-1 {
      grid-template-columns: 100%;
      grid-template-rows: 100%;
    }

    &.video-split-4 {
      grid-template-columns: 50% 50%;
      grid-template-rows: 50% 50%;
    }

    &.video-split-9 {
      grid-template-columns: 33.33% 33.33% 33.33%;
      grid-template-rows: 33.33% 33.33% 33.33%;
    }
  }

  .video-tools {
    // height: 48px;
    background: #95a0a0;

    ul {
      display: flex;
      list-style: none;
      padding: 0 10px;
      margin: 0;
      line-height: 48px;

      .icon {
        cursor: pointer;
      }
      li {
        margin: 0 8px;
      }
      .iconfont {
        font-size: 24px;
      }
    }
  }
}
</style>
